<template>
  <el-row justify="space-between">
    <company-selector width="w-1/4" v-model="selectCompanyId"/>
    <el-button v-if="checkPermission(Permissions.project, Action.add)" type="primary" @click="showAddDialog=true">
      添加项目
    </el-button>
  </el-row>
  <el-divider/>
  <el-table :data="projects" stripe border>
    <el-table-column label="项目名称" prop="company_project_name"></el-table-column>
    <el-table-column label="项目编号" prop="company_project_code"></el-table-column>
    <el-table-column label="项目状态" prop="company_project_state">
      <template #default="scope">
        <el-tag size="small" v-if="scope.row.company_project_state === '0'">未启动</el-tag>
        <el-tag size="small" type="danger" v-else-if="scope.row.company_project_state === '1'">进行中</el-tag>
        <el-tag size="small" type="success" v-else-if="scope.row.company_project_state === '2'">已完成</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="合同开始时间" prop="company_project_bgtime"></el-table-column>
    <el-table-column label="合同结束时间" prop="company_project_time">
      <template #default="{row}">
        <span :class="{'text-red':(checkDateExpire(row.company_project_time) && row.company_project_state !== '2')}">
          {{ row.company_project_time }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="合同资金" prop="company_project_m">
      <template #default="scope">
        <span>{{ scope.row.company_project_m ?? 0 }}元</span>
      </template>
    </el-table-column>
    <el-table-column label="收款进度" prop="company_project_jd">
      <template #default="scope">
        <el-progress type="line" :percentage="scope.row.company_project_jd ?? 0"
                     :color="colors"/>
      </template>
    </el-table-column>
    <el-table-column label="项目合同" prop="company_project_word">
      <template #default="{row}">
        <download-file-button v-model="row.company_project_word" :file-name="row.company_project_name">
          点击下载项目合同
        </download-file-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" min-width="120">
      <template #default="scope">
        <el-popconfirm :title="'确认删除' + scope.row.company_project_name  + '项目吗？'"
                       @confirm="deleteProjectFn(scope.row.company_project_id)"
                       v-if="checkPermission(Permissions.department, Action.delete)">
          <template #reference>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button v-if="checkPermission(Permissions.project, Action.edit)" type="primary" size="small"
                   @click="updateProject(scope.row)">修改
        </el-button>
        <el-button v-if="checkPermission(Permissions.project_detail, Action.view)" size="small"
                   @click="showDetailDialog=true;needWatchDetailId=scope.row.company_project_id">明细
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <add-project-dialog v-model="showAddDialog" @success="refetch()"/>
  <update-project-dialog v-model="showUpdateDialog" v-model:project="needUpdateProject" @success="refetch()"/>
  <project-detail v-model="showDetailDialog" v-model:project-id="needWatchDetailId"/>
</template>

<script setup lang="ts">
import {useMutation, useQuery} from "@pinia/colada";
import {deleteProject, getProjects} from "../../api/project.js";
import {provide, ref} from "vue";
import CompanySelector from "../../components/CompanySelector.vue";
import AddProjectDialog from "./components/AddProjectDialog.vue";
import {ElMessage} from "element-plus"
import UpdateProjectDialog from "./components/UpdateProjectDialog.vue";
import DownloadFileButton from "../../components/DownloadFileButton.vue";
import ProjectDetail from "./components/ProjectDetail.vue";
import type {ProjectDTO, ProjectVO} from "../../types/project";
import {useUserStore} from "../../store/userStore.ts";
import {Action, Permissions} from "../../types/permissions.ts";
import {useCloned} from "@vueuse/core";
import {checkDateExpire} from "../../utils/utils.ts";

const colors = [
  {color: '#f56c6c', percentage: 20},
  {color: '#e6a23c', percentage: 40},
  {color: '#ffe600', percentage: 60},
  {color: '#63ec59', percentage: 80},
  {color: '#2dff00', percentage: 100},
]

const selectCompanyId = ref<number>()
// 提供给孙子组件使用
provide('companyId', selectCompanyId)
const showAddDialog = ref(false)
const showUpdateDialog = ref(false)
const showDetailDialog = ref(false)
const needUpdateProject = ref<ProjectVO>({})
const needWatchDetailId = ref<number>()

let {checkPermission} = useUserStore();

const updateProject = (project: ProjectDTO) => {
  let {cloned} = useCloned(project);
  needUpdateProject.value = cloned.value;
  showUpdateDialog.value = true;
}

let {data: projects, refetch} = useQuery({
  key: () => ['projects', selectCompanyId.value ?? null],
  query: () => getProjects(selectCompanyId),
  enabled: () => selectCompanyId.value !== undefined
});

let {mutate: deleteProjectFn} = useMutation({
  mutation: (id: number) => deleteProject(id),
  onSuccess: () => {
    refetch()
    ElMessage.success("删除成功")
  },
  onError: () => {
    ElMessage.error("删除失败")
  }
});
</script>

<style lang="scss" scoped>

</style>